import React from 'react'
import Myswipper from '../../components/Myswipper'
import {  SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { BellOutline } from 'antd-mobile-icons'
import Mylist from '../../components/Mylist'
function Index() {
  let nav = useNavigate()
  return (
    <div style={{ background: '#f9f4f4' }}>
      {/* 黑色轮播图部分 */}
      <div style={{ position: 'relative' }}>
        {/* 引入自定义封装 */}
        <Myswipper></Myswipper>
        {/* 搜索框 */}
        <div style={{ position: 'absolute', top: '50%', right: '5%' }}>
          <SearchBar placeholder='输入关键字' onFocus={() => nav('/search')} style={{ width: '90vw', '--border-radius': '30px', '--height': '35px' }} />
        </div>
        {/* 头部 */}
        <div style={{
          position: 'absolute', top: '5px', color: '#fff', height: '25px',
          display: 'flex'
        }}>
          <span style={{ marginLeft: '18px' }}>订票服务</span>
          <div style={{ marginLeft: '65vw', display: 'flex', alignItems: 'center', width: '50px', justifyContent: 'space-around' }}>
            <span><BellOutline /></span>
            <img style={{ width: '20px', height: '20px', borderRadius: '50%' }} src="https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60" alt="" />
          </div>
        </div>
        {/* 文字 */}
        <p style={{ position: 'absolute', top: '35px', color: '#fff', fontSize: '18px', margin: '20px' }}>大家可以随时随地发现精彩活动就在你身边</p>
        {/* 下边的文字 */}
        <div style={{
          position: 'absolute', bottom: '25px', color: '#fff', height: '35px',
          display: 'flex', justifyContent: 'space-around', width: '100%'
        }}>
          <span>现场音乐会</span>
          <span>艺术展览</span>
          <span>专业研讨组</span>
          <span>体育团体竞赛</span>
        </div>
      </div>
      {/* 最新活动 */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', margin: '15px' }}>
          <b>最新活动</b>
          <span style={{ color: '#7d39dcff' }}>查看全部</span>
        </div>
        <div>
          <Mylist></Mylist>
          
        </div>

      </div>
    </div>
  )
}

export default Index
